<template>
	<view class="head">
		<u-sticky>
			<view style="padding: 10rpx 0rpx 10rpx 0rpx;background-color: white;">
				<u-search :showAction="true" actionText="搜索" :animation="true" borderColor="rgb(241, 241, 241)"
					placeholder='请输入销售人员' @custom="search" v-model="orderNum" @search="search"></u-search>
			</view>
			<!-- 			<view style="background-color: white;border-bottom: 0px dotted white;">
				<u-tabs @click="tabsClick" :list="titleList" lineWidth="30" :lineColor="`url(${lineBg}) 100% 100%`"
					:activeStyle="{
					            color: '#3b3b41',
					            fontWeight: 'bold',
					            transform: 'scale(1.05)'
					        }" :inactiveStyle="{
					            color: '#606266',
					            transform: 'scale(1)'
					        }" itemStyle="padding-left: 15px; padding-right: 15px; height: 44px;"></u-tabs>
			</view> -->
		</u-sticky>
		<view>
			<up-list class="myList" @scrolltolower="scrolltolower">
				<up-list-item v-for="(item,index) in dataList" :key="index">
					<view class="order">
						<!-- <span class="badge">{{getStatus(item.status)}}</span> -->
						<view class="order-number">
							<up-line-progress :percentage="calculateAchievementRate(item.actualAmount,item.targetAmount)" activeColor="#00aa00" height="15">
								
							</up-line-progress>
						</view>
						<view class="order-item" style="display: flex;width: 100%;justify-content: space-between;">
							<view style="display: flex;">
								<up-icon name="calendar" color="#4a4a4a"></up-icon>
								<text>年份：</text>
								<text class="myText">{{ item.year }}</text>
							</view>
							<view style="display: flex;float: right;">
								<up-icon name="star" color="#4a4a4a"></up-icon>
								<text>周/月份：</text>
								<text class="myText">{{ item.timeUnit }}</text>
							</view>
						</view>
						<view class="order-item" style="display: flex;width: 100%;justify-content: space-between;">
							<view style="display: flex;">
								<up-icon name="shopping-cart" color="#4a4a4a"></up-icon>
								<text>产品：</text>
								<text class="myText">{{ item.productName }}</text>
							</view>
							<view style="display: flex;float: right;">
								<up-icon name="tags" color="#4a4a4a"></up-icon>
								<text>销售部门：</text>
								<text class="myText">{{ item.departmentName }}</text>
							</view>
						</view>
						<view class="order-item" style="display: flex;width: 100%;justify-content: space-between;">
							<view style="display: flex;">
								<up-icon name="level" color="#4a4a4a"></up-icon>
								<text>等级：</text>
								<text class="myText">{{ item.gradeName }}</text>
							</view>
							<view style="display: flex;float: right;">
								<up-icon name="calendar-fill" color="#4a4a4a"></up-icon>
								<text>时间段：</text>
								<text class="myText">{{ formatPeriod(item.period,item.timeUnit) }}</text>
							</view>
						</view>
						<view class="order-item">
							<up-icon name="account" color="#4a4a4a"></up-icon>
							<text>销售人员：</text>
							<text class="myText">{{ item.salesperson }}</text>
						</view>
						<view class="order-item">
							<up-icon name="bag" color="#4a4a4a"></up-icon>
							<text>销售单位：</text>
							<text class="myText">{{ item.unit }}</text>
						</view>
						<view class="order-item">
							<up-icon name="rmb-circle" color="#4a4a4a"></up-icon>
							<text>销售额/量：</text>
							<text class="myText">{{ item.targetAmount }}</text>
						</view>
						<view class="order-item">
							<up-icon name="rmb-circle-fill" color="#4a4a4a"></up-icon>
							<text>实际达成额/量：</text>
							<text class="myText">{{ item.actualAmount }}</text>
						</view>


					</view>
				</up-list-item>
			</up-list>
		</view>
		<view>
		</view>
		<u-modal :show="modalShow" :showConfirmButton="false">
			<view class="slot-content">
				<rich-text nodes="加载数据,请稍后..."></rich-text>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import planApi from '@/apis/gyl/plan.js';
	import dayjs from 'dayjs';
	import isoWeek from 'dayjs/plugin/isoWeek';
	dayjs.extend(isoWeek)
	export default {
		data() {
			return {
				orderNum: '',
				lineBg: '',
				dataList: [],
				cancelId: null,
				pageNo: 1,
				pageSize: 8,
				status: 1,
				modalShow: false,
				messageShow: false,
				popupShow: false,
				item: null,
			};
		},

		methods: {

			calculateAchievementRate(actualAmount, targetAmount) {
				if (targetAmount === 0 || isNaN(actualAmount) || isNaN(targetAmount)) {
					return 0; // 如果目标金额为0或无效值，返回0%
				}
				const rate = (actualAmount / targetAmount) * 100;
				return Math.round(rate * 10) / 10; // 保留一位小数
			},
			
			search() {
				this.pageNo = 1;
				this.pageSize = 8;
				this.dataList = [];
				this.modalShow = true;
				this.list();
			},

			formatPeriod(period, timeUnit) {
				if (!period) return '';
				const date = dayjs(period);
				if (timeUnit === '月') {
					return date.format('YYYY-MM'); // 月份起始日期
				} else if (timeUnit === '周') {
					const startOfWeek = date.startOf('isoWeek').format('MM-DD'); // 周开始日期
					const endOfWeek = date.endOf('isoWeek').format('MM-DD'); // 周结束日期
					return `${startOfWeek}到${endOfWeek}`; // 返回周范围
				}
				return '';
			},

			/**
			 * 触底调用
			 */
			scrolltolower() {
				this.modalShow = true;
				this.pageNo++;
				this.list();
			},

			// ------------------------------------------------------------------------------------------------ api ----------------------------------------------------------------------------------------

			/**
			 * 列表查询
			 */
			async list() {
				const res = await planApi.saleDataList({
					pageNum: this.pageNo,
					pageSize: this.pageSize,
					// status: this.status,
					// orderNum: this.orderNum
				});
				if (res.success) {
					if (res.data.records.length == 0) {
						uni.showToast({
							icon: 'none',
							duration: 3000,
							title: '没有更多了'
						});
					} else {
						this.dataList.push(...res.data.records);
					}
				}
				this.modalShow = false;
			},

		},
		onLoad() {
			// this.modalShow = true;
			// this.list();
			// this.getTotal();
		},
		onShow() {
			this.$nextTick(() => {
				this.pageNo = 1;
				this.pageSize = 8;
				this.dataList = [];
				this.modalShow = true;
				this.list();
			})

		}
	}
</script>

<style lang="scss">
	.u-sticky {
		border-bottom: 1px solid #d7d9da;
		box-shadow: 5px 5px 12px rgba(0, 0, 0, 0.3);
		// margin-bottom: 25rpx;
	}

	.head {
		background-color: #f3f3f3;
	}


	.green {
		color: green;
	}

	.red {
		color: red;
	}

	.blue {
		color: #4b5eeb;
	}

	.order {
		border-radius: 30rpx;
		background-color: #ffffff;
		padding: 15rpx;
		box-sizing: border-box;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
		margin: 10px 20rpx 25rpx 20rpx;
		position: relative;

		.order-number {
			width: 100%;
			color: #c73614;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 2rpx solid #f3f3f3;
			padding-bottom: 20rpx;
			height: 30rpx;

			.number-left {
				display: flex;
				align-items: center;
				font-weight: bold;

				image {
					width: 30rpx;
					height: 30rpx;
					margin-right: 15rpx;
				}

				text {
					font-size: 30rpx;
					letter-spacing: 3rpx;
				}

			}

			.number-right {
				font-size: 26rpx;
				font-weight: bold;
				letter-spacing: 3rpx;
				padding-right: 5rpx;
				box-sizing: border-box;
			}

		}

		.order-item {
			width: 100%;
			display: flex;
			align-items: center;
			height: 50rpx;

			image {
				width: 30rpx;
				height: 30rpx;
				margin-right: 15rpx;
			}

			.u-icon {
				margin-right: 5rpx;
			}

			text {
				font-size: 24rpx;
				color: rgba(170, 170, 170, 0.8);
			}

			.myText {
				font-weight: bold;
				color: rgba(2, 2, 2, 0.8);
			}
		}

		.order-bom {
			width: 100%;
			height: 60rpx;
			background-color: #f9f9f9;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.order-bom-left {
				color: rgba(0, 0, 0, 0.5);
				font-size: 24rpx;
				padding-left: 10rpx;
				box-sizing: border-box;
			}

			.order-bom-right {
				// width: 200rpx;
				height: 100%;
				display: flex;
				color: #ffffff;
				font-size: 26rpx;

				.box1 {
					height: 100%;
					line-height: 60rpx;
					background-color: #e5a84a;
					padding: 0 30rpx;
					box-sizing: border-box;
					border-radius: 10rpx;
					margin-right: 10rpx;
				}

				.box2 {
					height: 100%;
					line-height: 60rpx;
					background-color: #56caa3;
					padding: 0 30rpx;
					box-sizing: border-box;
					border-radius: 10rpx;
					margin-right: 10rpx;
				}

				.box3 {
					height: 100%;
					line-height: 60rpx;
					background-color: #526afc;
					padding: 0 30rpx;
					box-sizing: border-box;
					border-radius: 10rpx;
					// margin-right: 10rpx;
				}

				.box4 {
					height: 100%;
					line-height: 60rpx;
					background-color: #aa55ff;
					padding: 0 30rpx;
					box-sizing: border-box;
					border-radius: 10rpx;
					margin-right: 10rpx;
				}

				.box5 {
					height: 100%;
					line-height: 60rpx;
					background-color: #aa557f;
					padding: 0 30rpx;
					box-sizing: border-box;
					border-radius: 10rpx;
					margin-right: 10rpx;
				}

				.box6 {
					height: 100%;
					line-height: 60rpx;
					background-color: #aaaa00;
					padding: 0 30rpx;
					box-sizing: border-box;
					border-radius: 10rpx;
					margin-right: 10rpx;
				}

				.box7 {
					height: 100%;
					line-height: 60rpx;
					background-color: #00a1ec;
					padding: 0 30rpx;
					box-sizing: border-box;
					border-radius: 10rpx;
					margin-right: 10rpx;
				}

				.box8 {
					height: 100%;
					line-height: 60rpx;
					background-color: #b90000;
					padding: 0 30rpx;
					box-sizing: border-box;
					border-radius: 10rpx;
					margin-right: 10rpx;
				}
			}
		}
	}

	.badge {
		position: absolute;
		top: -10rpx;
		right: 0rpx;
		background-color: green;
		color: white;
		border-radius: 0% 0% 30% 30%;
		width: 160rpx;
		height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 12px;
	}

	::v-deep .u-textarea__field {
		border: 1px solid #d8d2d0 !important;
	}

	.iconStyle {
		width: 45rpx;
		height: 45rpx;
	}
</style>